<template>
    <div class="home">
        <h1 class="mb8">API test</h1>

        <div v-for="api in apiList" :key="api.url" class="test">
            <p class="test__title">test {{ api.url }}</p>

            <div class="test__body">
                <button class="test__button" :disabled="api.testing" @click="onTest(api)">
                    测试{{ api.testing ? '...' : '' }}
                </button>
                <pre v-if="api.data" class="test__success">{{ api.data }}</pre>
                <pre v-if="api.error" class="test__error">{{ api.error }}</pre>
            </div>
        </div>
    </div>
</template>

<script>
import axios from './utils/axios';

export default {
    data() {
        return {
            apiList: [
                {
                    url: '/api/app/basic-demo2-b653sh/demo/bb',
                    testing: false,
                    data: null,
                    error: null
                },
                {
                    url: '/api/app/basic-demo2-b653sh/demo/cc',
                    testing: false,
                    data: null,
                    error: null
                }
            ]
        };
    },

    methods: {
        async onTest(api) {
            if (api.testing) return;

            api.testing = true;
            api.data = null;
            api.error = null;

            try {
                api.data = await axios({
                    url: api.url
                });
            } catch (err) {
                api.error = err.message;
            } finally {
                api.testing = false;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.hone {
    background: #eee;
}

.test {
    border: 2px solid #ddd;
    background: #fff;
    margin-bottom: 20px;

    &__title {
        padding: 4px 8px;
        margin: 0;
        border-bottom: 2px solid #ddd;
    }

    &__body {
        padding: 10px;
    }

    &__button {
        font-size: 14px;
        height: 34px;
        padding-left: 12px;
        padding-right: 12px;
    }

    &__success {
        color: green;
    }

    &__error {
        color: red;
    }
}
</style>
